<template>
  <div class="container">
    <div class="tianqi"></div>
    <div class="search">
      <van-search shape="round" v-model="input" placeholder="请输入城市名,拼音,或字母查询" @update:model-value="keyword"
        :clearable="false" />
    </div>
    <div class="city" v-if="flag">
      <div class="recent-city">
        <p>定位/最近访问</p>
        <van-button icon="location" type="default" to="/" style="width:auto" @click="changeCities(locationCiy)" size="small">{{ locationCiy }}</van-button>
        <van-button v-show ="item == locationCiy? false:true" v-for="item in historyCities"   @click="changeCities(item)" to="/" type="default" size="small">
          {{ item }}</van-button>
      </div>
      <div class="hot-city">
        <p>热门城市</p>
        <van-button type="default" v-for="item in hotCities" size="small"  :key="item.id"  to="/" 
          @click="changeCities(item.name)">{{
              item.name
          }}</van-button>
      </div>
      <div class="city-list">
        <p>城市列表</p>
        <van-index-bar :index-list="indexList">
          <van-index-anchor v-for="(item, i) in cities" :index="i">{{ i }}
            <van-cell to="/" v-for="city in item" :title="city.name" :key="city.id" @click="changeCities(city.name)">
            </van-cell>
          </van-index-anchor>
        </van-index-bar>
      </div>
    </div>
    <div v-else>
      <div class="search">
        <p>搜索结果</p>
        <van-button type="default" v-for="item in searchList" size="small" to="/"  @click="changeCities(item.name)" :key="item.id">{{ item.name }}</van-button>
      </div>
    </div>
  </div>
  <BackTop />
</template>
<script setup>
import { useCityStore } from '/src/stores/cities.js';
import { computed, onMounted, ref, toRefs } from 'vue';
import BackTop from '/src/components/BackTop.vue';
import {  locationCity } from '/src/hooks/geoJson.js'
import axios from "axios"
const cities = ref()
const hotCities = ref()
const indexList = ref()
// 使用useCityStore
const cityStore = useCityStore()
const { changeCities, historyCities, locationCiy } = toRefs(cityStore)
onMounted(
  async () => {
    locationCiy.value
    const ciy = await locationCity()
    locationCiy.value = ciy.ad_info.city
    axios.get('http://122.112.161.135:8000/city').then(res => {
      //console.log(res.data.data.cities);
      // console.log(res.data.data.hotCities);
      cities.value = res.data.data.cities
      hotCities.value = res.data.data.hotCities
      indexList.value = Object.keys(cities.value)
    })
  },
)
const input = ref('')
const searchList = ref()
const timer = ref()
const flag = computed(() =>
  input.value == '' ? true : false
)
function keyword() {
  if (timer.value) {
    clearTimeout(timer.value)
  }
  timer.value = setTimeout(() => {
    const result = []
    for (let i in cities.value) {
      // console.log(i);
      cities.value[i].forEach(item => {
        // 拼音查询或者字母查询
        if (item.spell.indexOf(input.value) > -1 ||
          item.name.indexOf(input.value) > -1) {
          result.push(item)
        }
      });
      searchList.value = result
    }
  }, 100);
}
</script>
<style  src="/src/assets/city.styl" scoped>

</style>
<style>
/* 为啥stylus不支持这个下划线*/
.van-index-bar__sidebar {
  position: fixed;
  top: 510px;
  right: 20%;
}

.van-index-bar__index {
  margin-bottom: 6px;
}
</style>